import './index.scss';
import {useEffect} from "react";
import * as echarts from "echarts";

const DataTypeRank = () => {

    useEffect(() => {
        init()
    }, [])

    function init() {
        let value = [11404, 10522, 9071, 8432, 8077];
        let names = ['产业链信息', '企业评级', '征信黑名单', '银行信贷', '企业董监高']
        const rankPic = {
            first: require('../../assets/images/top1.png'),
            second: require('../../assets/images/top2.png'),
            third: require('../../assets/images/top3.png'),
            fourth: require('../../assets/images/top4.png'),
            fifth: require('../../assets/images/top5.png'),
        };
        let max1 = Math.max.apply(null, value);
        max1 = max1 + 1000
        let data1 = [];
        //data1存放背景条的数值，for循环使其数量与value一致
        for (let i = value.length - 1; i >= 0; i--) {
            data1.push(max1);
        }
        // 初始化echarts实例，将其挂载到id为main的dom元素上展示
        let myChart = echarts.init(document.getElementById("dtr-echart"));
        let option = {
            grid: {
                left: "33%",
                top: "0%",
                bottom: "5%",
                right: "16%",
            },
            xAxis: {
                type: 'value',
                max: max1,
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                inverse: true,
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    margin: 0,
                    verticalAlign: 'center',
                    align: 'left',
                    padding: [0, 0, 0, -120],
                    distance: -50,
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 12,
                        align: "left"
                    },
                    formatter: function (value: string) {
                        let valueIndex = 0
                        names.forEach((item, index) => {
                            if (item == value) {
                                valueIndex = index
                            }
                        })
                        return '{' + (valueIndex + 1) + '|} {s|' + value + '}'
                    },
                    rich: {
                        1: {
                            height: 14,
                            verticalAlign: 'center',
                            backgroundColor: {
                                image: rankPic.first
                            }
                        },
                        2: {
                            height: 14,
                            verticalAlign: 'center',
                            backgroundColor: {
                                image: rankPic.second
                            }
                        },
                        3: {
                            height: 14,
                            verticalAlign: 'center',
                            backgroundColor: {
                                image: rankPic.third
                            }
                        },
                        4: {
                            height: 14,
                            verticalAlign: 'center',
                            backgroundColor: {
                                image: rankPic.fourth
                            }
                        },
                        5: {
                            height: 14,
                            verticalAlign: 'center',
                            backgroundColor: {
                                image: rankPic.fifth
                            }
                        },
                        // s: {
                        //     fontSize: this.getFontSize(14),
                        //     color: "#fff"
                        // }
                    },
                },
                data: names
            },
            series: [{
                //真实数值的条形图主体
                name: '真实值',
                type: 'bar',
                animation: true,
                barWidth: 4,
                label: {
                    show: false,
                },
                itemStyle: {
                    // normal: {
                    //     color: {
                    //         x: 0,
                    //         y: 0,
                    //         x2: 1,
                    //         y2: 0,
                    //         colorStops: [{
                    //             offset: 0,
                    //             color: 'rgba(226,74,59,0)' // 0% 处的颜色
                    //         }, {
                    //             offset: 1,
                    //             color: '#e24a3b'// 100% 处的颜色
                    //         }],
                    //     },
                    //     barBorderRadius: 5,
                    // }
                    normal:{
                        //柱体的颜色
                        //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                        color: function(params: any){
                            let colorList = [
                                ['#e24a3b','rgba(226,74,59,0)'],
                                ['#c9b217','rgba(201,178,23,0)'],
                                ['#3877f2','rgba(56,119,242,0)'],
                                ['#3877f2','rgba(56,119,242,0)'],
                                ['#3877f2','rgba(56,119,242,0)'],
                            ];
                            let colorItem = colorList[params.dataIndex];
                            return new echarts.graphic.LinearGradient(1,0,0,0,[
                                {
                                    offset:0,
                                    color:colorItem[0]
                                },
                                {
                                    offset:1,
                                    color:colorItem[1]
                                }
                            ],false);
                        }
                    }
                },
                data: value,
                z: 1
            },
                // {
                //     //辅助1：真实数值的圆点
                //     name: '真实值圆点',
                //     type: 'scatter',
                //     symbolOffset: ['10%', '0'],
                //     symbolSize: 8,
                //     itemStyle: {
                //         borderWidth: 0,
                //         color: 'rgba(255,255,255,1)'
                //     },
                //     data: value,
                //     z: 5
                // },
                // {
                //     //辅助2：真实数值的圆点外侧圆环
                //     name: '真实值圆环',
                //     type: 'scatter',
                //     symbolOffset: ['10%', '0'],
                //     symbolSize: 15,
                //     itemStyle: {
                //         borderWidth: 1,
                //         borderColor: 'rgba(101,224,255,1)',
                //         color: 'rgba(255,255,255,0.43)'
                //     },
                //     data: value,
                //     z: 10
                // },
                {
                    //辅助3：背景条
                    name: '背景条',
                    type: 'bar',
                    animation: false,
                    barGap: '-100%',
                    barWidth: 4,
                    label: {
                        show: true,
                        position: 'insideRight',
                        verticalAlign: 'center',
                        padding: [0, -30, 0, 0],
                        distance: -15,
                        color: '#fff',
                        fontSize: 14,
                        formatter: function (params: { dataIndex: number; }) {
                            return ' ' + value[params.dataIndex].toFixed(0);
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(62,78,123,1)',
                            barBorderRadius: 5,
                        },

                    },
                    data: data1,
                    z: 0
                }
            ]
        };
        // 绘制图表
        myChart.setOption(option);
    }

    return (
        <div className='dtr-container'>
            <div className='dtr-title'>数据类型调用排名</div>
            <div id='dtr-echart' className='dtr-echart'></div>
        </div>
    )
}

export default DataTypeRank;
